<script setup lang="ts">
import IndexTitle from './IndexTitle.vue'
import * as echarts from 'echarts'
import Charts from '../../components/charts.vue'
import moment from 'moment'
import {ref,onMounted} from 'vue'
import {lineOption} from '../../utils/option'
import {getStudents} from '../../request/air'
import setResize from '../../hook/Resize'
setResize()
// 学员分布情况的数据
// 创建socket
let ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086");

//定义option
const option =ref({
    legend: {
        textStyle:{
            color:'dbdbdb'
        }
    },
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '20%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol:'none'
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol:'none'
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol:'none'
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' },
        symbol:'none'
      }
    ]
  });

//定义ref数据获取dom节点
const mycharts=ref()
onMounted(()=>{

   console.log(mycharts.value)
   const charts=echarts.init(mycharts.value)

  //接收消息
    ws.onmessage=e=>{
        // console.log(e)
        //接受数据变转成对象
        // let data=JSON.parse(e.data)
        // console.log('学生分布情况数据',data)
        let {legendData,seriesData}=JSON.parse(e.data)
        console.log('学生数据情况',legendData,seriesData)
        
        //创建x轴时间
        let timerArr=[]
        //获取当前时间戳
        let currentTime=Date.now()
        for(let a=6;a>0;a--){
            timerArr.push(moment(currentTime -  a*60*1000).format('hh:mm:ss'))
        }
        //将创建好的时间放在option里面
        option.value.dataset.source=[timerArr]

        //组合具体数据
        let sourceData=seriesData.map((arr: any[],index: string|number)=>{
            arr.unshift(legendData[index])
            return arr
        })
        // 修改option
        option.value.dataset.source.push(...sourceData)
        // const charts=echarts.init(mycharts.value)
        // charts.setOption(option.value)  
        charts.setOption(option.value)
      }
})
   
   
// // 创建x轴的时间
// let timeArr: string[] = []
// // 获取当前时间戳
// let currentTime = Date.now()
// for (let a = 6; a > 0; a--) {
//     timeArr.push(moment(currentTime - a * 2 * 60 * 1000).format('hh:mm:ss'))
// }
// // 定义让dom更新数据
// let key = ref(0)
// // 将数组放在option中
// lineOption.dataset.source = [timeArr]
// // 接收后端数据
// // 接收消息
// ws.onmessage = e => {
//     key.value = key.value + 1
//     // console.log(e);
//     // 接收数据转成对象
//     let { legendData, seriesData } = JSON.parse(e.data)
//     // 定义series数据
//     let seriesArr: { type: string; smooth: boolean; seriesLayoutBy: string; emphasis: { focus: string }; symbol: string }[] = []
//     // 组合具体数据
//     let sourceData = seriesData.map((arr: any[], index: string | number) => {
//         arr.unshift(legendData[index])
//         seriesArr.push({
//             type: 'line',
//             smooth: true,
//             seriesLayoutBy: 'row',
//             emphasis: { focus: 'series' },
//             symbol: 'none'

//         })

//        
//     }

</script>
<template>
    <div class="box">
        <!-- 标题 -->
        <IndexTitle title="学生分布情况"></IndexTitle>
        <!-- 下面内容 -->
        <div class="content">
            <div class='mycharts' ref="mycharts"></div>
            <!-- <Charts ref="mycharts" :option="lineOption"></Charts> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
.box {
    width: 74%;
    height: 40%;
    position: absolute;
    bottom: 0;
    left: 50px;

    .content {
        height: calc(100% - 50px);
        .mycharts{
            width: 100%;
            height: 100%;
            // border: solid 3px red;
        }
    }
}
</style>